.border-box {
	box-sizing: border-box;
}
.d-n { display: none; }
.d-b { display: block; }
.d-ib { display: inline-block; }
.m-auto { margin: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-auto { margin-top: auto; }
.w100p { width: 100%; }
.h100p { height: 100%; }
.wh100p { width: 100%; height: 100%; }

.bdrs-2 { border-radius: 2px; }
.bdrs-3 { border-radius: 3px; }
.bdrs-5 { border-radius: 5px; }
.bdrs-8 { border-radius: 8px; }
.bdrs-10 { border-radius: 10px; }
.bdrs-15 { border-radius: 15px; }
.bdrs-100 { border-radius: 100px; }

.mt-02 {
	margin-top: 2px;
}
@for $i from 9 through 0 {
	.op-#{$i} {
		opacity: #{$i*0.1};
	}
	.pa-#{$i} {
		padding: #{$i*4}px;
	}
	.pd-#{$i} {
		padding: #{$i}px;
	}
	.m-#{$i} {
		margin: #{$i*4}px;
	}
}
@for $i from 9 through 0 {
	.pt-#{$i} {
		padding-top: #{$i*4}px;
	}
	.pl-#{$i} {
		padding-left: #{$i*4}px;
	}
	.pr-#{$i} {
		padding-right: #{$i*4}px;
	}
	.pb-#{$i} {
		padding-bottom: #{$i*4}px;
	}
	.mt-#{$i} {
		margin-top: #{$i*4}px;
	}
	.ml-#{$i} {
		margin-left: #{$i*4}px;
	}
	.mr-#{$i} {
		margin-right: #{$i*4}px;
	}
	.mb-#{$i} {
		margin-bottom: #{$i*4}px;
	}

	.px-#{$i} {
		padding-left: #{$i*4}px;
		padding-right: #{$i*4}px;
	}
	.py-#{$i} {
		padding-top: #{$i*4}px;
		padding-bottom: #{$i*4}px;
	}
}